<template>
  <div>
    <NuxtLoadingIndicator />
    <header class="header">
      <div class="header-wrap between">
        <div class="header__left">
          <nuxt-link to="/" class="logo">
            <img src="~/assets/img/header/logo.png" alt="logo" />
          </nuxt-link>
          <nav class="hidden-sm-and-down">
            <ul>
              <li :class="route.path === '/' ? 'active' : ''">
                <NuxtLink to="/">首页</NuxtLink>
              </li>
              <li :class="route.path === '/bbx' ? 'active' : ''">
                <nuxt-link :to="`/bbx`">百宝箱</nuxt-link>
              </li>
              <li :class="route.path === '/hot' ? 'active' : ''">
                <nuxt-link :to="`/hot`">热榜</nuxt-link>
              </li>
              <li :class="route.path === '/study' ? 'active' : ''">
                <nuxt-link :to="`/study`">学习</nuxt-link>
              </li>
              <li :class="route.path === '/navigation' ? 'active' : ''">
                <nuxt-link :to="`/navigation`">犀牛导航</nuxt-link>
              </li>
              <li>
                <el-popover placement="bottom" :width="112" trigger="hover">
                  <template #reference>
                    <a href="javascript:;">联系犀牛</a>
                  </template>
                  <div class="setting-link" @click="aboutUsClick">
                    <img
                      class="icon"
                      src="~/assets/img/header/phone-call.png"
                      alt=""
                    />
                    <span>联系我们</span>
                  </div>
                  <div class="setting-link" @click="cooperationDialogClick">
                    <img
                      class="icon"
                      src="~/assets/img/header/shangwuhezuo.png"
                      alt=""
                    />
                    <span>商务合作</span>
                  </div>
                  <div class="setting-link" @click="feedbackDialogClick">
                    <img
                      class="icon"
                      src="~/assets/img/header/yijianfankui.png"
                      alt=""
                    />
                    <span>意见反馈</span>
                  </div>
                </el-popover>
              </li>
            </ul>
          </nav>
        </div>
        <div class="header__right items-center">
          <IconGroup/>
          <div class="header-line"></div>
          <div class="monery-box">
            <img
              class="bi"
              src="~/assets/img/header/bi.png"
              alt=""
              srcset=""
            />&nbsp; <span class="money">{{ money }}</span
            >&nbsp;NB
            <div class="coin" @click="payDialogClick">充值</div>
          </div>
          <div class="header-line"></div>
          <template v-if="token">
            <UserBox />
          </template>
          <template v-else>
            <div class="header__login items-center" @click="goLogin">
              <el-icon class="icon" color="#fff" :size="16"
                ><ElIconUserFilled
              /></el-icon>
              <span class="no__login_text ml-10"> 未登录 </span>
            </div>
          </template>
        </div>
      </div>
    </header>
    <div class="header__height__placeholder"></div>
    <slot />
  </div>
  <LoginPop v-if="wxDialogVisible || phoneDialogVisible" />
  <AboutUs ref="aboutUs" />
  <CooperationDialog ref="cooperationDialog" />
  <FeedbackDialog ref="feedbackDialog" />
  <PayDialog ref="payDialog" />
</template>

<script setup>
const route = useRoute();

const money = ref(0);

const payDialog = ref()
const payDialogClick = () => {
  payDialog.value?.show()
}

const token = useToken();

const wxDialogVisible = useWxDialogVisible();
const phoneDialogVisible = usePhoneDialogVisible();

function goLogin() {
  wxDialogVisible.value = true;
}

const aboutUs = ref();
const aboutUsClick = () => {
  aboutUs.value?.show();
};
const cooperationDialog = ref();
const cooperationDialogClick = () => {
  cooperationDialog.value?.show();
};
const feedbackDialog = ref();
const feedbackDialogClick = () => {
  feedbackDialog.value?.show();
};
</script>

<style lang="scss" scoped>
@import "./header.scss";
</style>
